<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>canvas图片处理</h1>
	<div>选择本地图片:</div>
	<div>
		<input type="file" id="file" name="file" onchange="setFile1(this,image)" placeholder="请选择一张本地图片">	
	</div>
	<button onclick="diffY()">水平颜色分析</button><br/>	
	<canvas id="canvas" style="display:block;margin: 0 auto;border:1px solid #aaa;">
		你的浏览器不支持canvas
	</canvas>	

	<script type="text/javascript">
		var canvas = document.getElementById("canvas")
		var ctx = canvas.getContext("2d")

		var image = new Image();

		let setFile = function (obj,imgObj,e){
			e = e || window.event;
			if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
		        alert("很遗憾，您浏览器版本太老了，无法使用我们的小工具 ！");
		        return;
		    }
		    //console.log(e);
			//if(e.files.length > 0)$(areaId).src = getObjectURL(e.files[0]);
			//var files=document.getElementById("file").files;
			var files=obj.files;
			//document.getElementById("pic").innerHTML="";
			if(files.length>0){
				var fr=new FileReader();
				fr.readAsDataURL(files[0]);
				fr.onload=function(c){
					imgObj.src = c.target.result;
				};

			}			
		}
		setFile1 = function (thisObj,imgObj){
			//console.log(p1.files,p2,p3);return;
			setFile(thisObj,imgObj);
		}
		image.onload = function(){
			canvas.width = image.width;
			canvas.height = image.height;
			ctx.drawImage(image,0,0);
		}
		function windowToCanvas(x,y){
			var bbox = canvas.getBoundingClientRect()
			return {x:x-bbox.left,y:y-bbox.top}
		}

		// function drawCanvas2True(point){
		// 	ctx.drawImage(offCanvas,0,point.y)
		// }
		function diffY(){
			var lastRGB = {};
			for(var y=0;y<canvas.height;y++){
				var imageData = ctx.getImageData(0,y,canvas.width,1);
				var pixelData = imageData.data;
				if(y==133) console.log(pixelData);
				var rs = 0,gs=0,bs=0;
				for(var x=0;x<canvas.width;x=x+4){
					//var r = pixelData[0],g=pixelData[1],b=pixelData[2];
					rs+=pixelData[x+0];
					gs+=pixelData[x+1];
					bs+=pixelData[x+2];
				}
				var rgb = {};
				rgb.r=(rs/canvas.width).toFixed(2);
				rgb.g=(gs/canvas.width).toFixed(2);
				rgb.b=(bs/canvas.width).toFixed(2);
				// for(var x=0;x<canvas.width;x=x+4){
				// 	pixelData[x+0]=rgb.r;
				// 	pixelData[x+1]=rgb.g;
				// 	pixelData[x+2]=rgb.b;
				// }
				// if(y==33) console.log(pixelData);
				// ctx.putImageData(imageData,0,0,0,y); 				
				if(y>0){
					var rRate = 100*(Math.abs(rgb.r-lastRGB.r)/lastRGB.r).toFixed(2);
					var gRate = 100*(Math.abs(rgb.g-lastRGB.g)/lastRGB.g).toFixed(2);
					var bRate = 100*(Math.abs(rgb.b-lastRGB.b)/lastRGB.b).toFixed(2);
					if(rRate>0.5||gRate>0.5||bRate>0.5){
						//document.write(y+":("+lastRGB.r+","+lastRGB.g+","+lastRGB.b+")-("+rgb.r+","+rgb.g+","+rgb.b+")<br/>");
						console.log(`${y}:(${rRate},${gRate},${bRate})`);
						console.log(`(${lastRGB.r},${lastRGB.g},${lastRGB.b})-(${rgb.r},${rgb.g},${rgb.b})`);
					}
				}
				lastRGB = rgb;
			}
		}		
	</script>
</body>
</html>